|
实现点击某一行展开，有两种方式，亲测第二种有效：
1. _expanded
在columns.js data()的columns部分增加一列
{
type:'expand',
width:30,
render:(h,params)=>{
return h('div',params.row.detail) //detail是请求的数据
}
}
然后在中，绑定行点击事件@on-row-click
methods:{
onRowClick(row,index){
this.tableData.forEach((item,i)=>{ //每次只能展开一个，其他自动收起
i !== index ? this.tableData[i]._expanded = false : '';
})
this.tableData[index]._expanded = !this.tableData[index]._expanded;
this.tableData.sort()
}
}
2. refs
在columns.js data()的columns部分增加一列
{
type: 'expand',
title: ' ',
width: 40,
align: 'center',
render: (h, params) => {
return h(DepartureTraceExpand, {
props: {
row: params.row,
traceHeadId: params.row.id
}
});
}
},
然后在中，绑定行点击事件@on-row-click
onRowClick方法
methods:{
onRowClick(row,index){
this.$nextTick(() => {
this.$refs.table.toggleExpand(index);
})
}
}
效果图
WechatIMG389.jpeg
3. 如果默认元素（箭头）点击无效，可添加样式覆盖
td.expandBox .ivu-table-cell{
position: relative;
&::after{
position: absolute;
content: '';
top: 0;
left:0;
height: 100%;
width:100%;
z-index: 9;
}
&:hover{
.ivu-icon-ios-arrow-forward{
color:#1d7cd0;
border-color:#1d7cd0;
}
}
}
4.默认展开所有行
defaultExpand(){
if(this.currentCode === 'empDimissionTrack'){
this.$nextTick(() => {
this.tableData.forEach((item,index) => {
this.$set(this.tableData[index],'_expanded',true)
}
});
})
}
},
|